import React from 'react';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Form, Input, Button, message } from 'antd';
import { useIntl } from 'umi';
export interface SelectProps {
  onSearch: (values: any) => void;
  children?: any;
  hideSearchItem: any;
}
const MfgMtlSearch: React.FC<SelectProps> = (props: SelectProps) => {
  const [form] = Form.useForm();
  const intl = useIntl();
  const search = (values: any) => {
    if (typeof props.onSearch === 'function') {
      props.onSearch(values);
    }
  };
  const handleReset = () => {
    form.resetFields();
    message.success(intl.formatMessage({ id: 'pages.reset.complete' }));
  };
  return (
    <Form form={form} onFinish={search} layout="inline">
      <Form.Item name="jobNum" label={intl.formatMessage({ id: 'pages.jobNum' })}>
        <Input style={{ width: 120 }} />
      </Form.Item>
      <Form.Item name="keywords" label={intl.formatMessage({ id: 'pages.partNum' })}>
        <Input style={{ width: 120 }} />
      </Form.Item>
      <Form.Item name="pickNum" label={intl.formatMessage({ id: 'pages.pickNum' })}>
        <Input style={{ width: 120 }} />
      </Form.Item>
      <Form.Item>
        <Button.Group>
          <Button
            type="primary"
            icon={<SearchOutlined />}
            htmlType="submit"
            title={intl.formatMessage({ id: 'pages.search' })}
            style={{ zIndex: 3 }}
          >
            {intl.formatMessage({ id: 'pages.search' })}
          </Button>
          <Button icon={<ReloadOutlined />} onClick={handleReset}>
            <span>{intl.formatMessage({ id: 'pages.reset' })}</span>
          </Button>
        </Button.Group>
      </Form.Item>
      {props.children}
    </Form>
  );
};

export default MfgMtlSearch;
